【vue+elementUI】自定义表单验证

2023-02-26 18:30| 来源: 网络整理| 查看: 265

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator

直接拿elementUI的全部代码举例：

一、HTML代码块： - 立即创建重置复制代码二、js代码块： export default { data() { return { ruleForm: { name: "", region: "", date1: "", date2: "", delivery: false, type: [], resource: "", desc: "", }, rules: { name: [ { required: true, message: "请输入活动名称", trigger: "blur" }, { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }, ], region: [ { required: true, message: "请选择活动区域", trigger: "change" }, ], date1: [ { type: "date", required: true, message: "请选择日期", trigger: "change", }, ], date2: [ { type: "date", required: true, message: "请选择时间", trigger: "change", }, ], type: [ { type: "array", required: true, message: "请至少选择一个活动性质", trigger: "change", }, ], resource: [ { required: true, message: "请选择活动资源", trigger: "change" }, ], desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }], }, }; }, methods: { submitForm() { this.$refs[ruleForm].validate((valid) => { if (valid) { alert("submit!"); } else { console.log("error submit!!"); return false; } }); }, resetForm() { this.$refs[ruleForm].resetFields(); }, }, }; 复制代码三、使用elementUI提供的校验规则：

1.定义验证规则。

首先需要在data中定义验证规则rules对象，rules对象的第一层属性是表单绑定的数据对象。eg：

//取上面部分验证规则作展示 data() { return { ruleForm: { //表单绑定的数据（对象形式存储） name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' }, rules: { name: [ //定义对ruleForm.name的验证规则 { required: true, message: '请输入活动名称', trigger: 'blur' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ], region: [ //定义对ruleForm.region的验证规则 { required: true, message: '请选择活动区域', trigger: 'change' } ] //required：指定必须校验字段； //type：内容必须为指定类型； //message：提示信息； //trigger：触发验证的事件，有blur和change； //max：指定内容的最大长度； //min：指定内容的最小长度； } }; }, }, 复制代码

2.el-form绑定验证规则。

复制代码

3.el-form-item配置prop属性，表明验证表单绑定的数据中的哪个字段。

//此处prop属性值为name，即校验ruleForm中的name //此处prop属性值为region，即校验ruleForm中的region 复制代码

4.在业务逻辑中使用，eg：提交表单的函数中。

methods: { submitForm() { //验证表单会返回一个value，值为Boolean类型 //$refs通过el-form的ref属性获取节点对象 //使用elementUI提供的validate方法，其中需要传回调 this.$refs[ruleForm].validate((valid) => { //如果全部字段通过验证，返回true if (valid) { ...... } else { //如果有字段未能通过验证，则返回false ...... return false; } }); } } 复制代码

注意：如果验证的回调需要进行异步操作，要注意async/await的位置。

methods: { submitForm() { //注意async的书写位置 this.$refs[ruleForm].validate( async (valid) => { if (valid) { ...... let res = await getUserAPI() } else { ...... return false; } }); } } 复制代码四、自定义校验规则：

1.在表单双向绑定数据对象与使用prop声明验证的字段与上面一样。

2.自定义校验规则。

//以下代码实例校验的对象和上面的代码不是同一个！！ data() { //定义对ruleForm.age字段的校验规则 var checkAge = (rule, value, callback) => { if (!value) { return callback(new Error("年龄不能为空")); } setTimeout(() => { if (!Number.isInteger(value)) { callback(new Error("请输入数字值")); } else { if (value < 18) { callback(new Error("必须年满18岁")); } else { callback(); //自定义校验 callback 必须被调用 } } }, 1000); }; //定义对ruleForm.pass字段的校验规则 var validatePass = (rule, value, callback) => { if (value === "") { callback(new Error("请输入密码")); } else { if (this.ruleForm.checkPass !== "") { this.$refs.ruleForm.validateField("checkPass"); } callback(); //自定义校验 callback 必须被调用 } }; //定义对ruleForm.checkPass字段的校验规则 var validatePass2 = (rule, value, callback) => { if (value === "") { callback(new Error("密码不能为空")); } else if (value !== this.ruleForm.pass) { callback(new Error("两次输入密码不一致!")); } else { callback(); //自定义校验 callback 必须被调用 } }; // rule：自定义的校验规则 // value：待校验的用户输入的内容 // callback：放行函数，或许和路由守卫中的next（）差不多 return { //表单双向绑定的数据-ruleForm对象 ruleForm: { pass: "", checkPass: "", age: "", }, //在data定义的存放校验规则的对象-rules对象 rules: { pass: [{ validator: validatePass, trigger: "blur" }], checkPass: [{ validator: validatePass2, trigger: "blur" }], age: [{ validator: checkAge, trigger: "blur" }], }, }; } 复制代码 methods: { submitForm() { this.$refs[ruleForm].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); } } 复制代码

触发流程大概是（不太确定）：

点击事件提交表单，validate（）事件触发，触发后找到校验规则合集rules对象（它指定了需要校验的字段、校验该字段的规则以及触发校验的事件），触发rules包含的校验规则进行校验，validate（）返回一个valid，值为Boolean类型，用来判断执行成功/失败后的操作。

【本文地址】

公司简介

联系我们